<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .edit{
            width: 500px;
            height: 300px;
            border: solid black 1px;
            margin: 0 auto;
        }
        .button-cc{
            width: 500px;
            height: auto;
            border: solid black 1px;
            margin: 0 auto;
            margin-top: 50px;
            padding: 20px;
        }
        .edit[contenteditable]:empty:before {
            content: attr(placeholder);
            color: #cccccc;
        }
        .edit[contenteditable]:focus {
            content: none;
        }
        .result-cc{
            width: 500px;
            height: auto;
            margin: 0 auto;
            margin-top: 50px;
            padding: 20px;
        }

    </style>
</head>
<body>
    <body>
        <div
          class="edit"
          id="inputContent"
          contenteditable="true"
          placeholder="请在这输入内容" 
          onblur="blurEdit()"></div>
          <div class="button-cc">
            <button onclick="clickInsert('zs','张三')">张三</button>
            <button onclick="clickInsert('ls','李四')">李四</button>
            <button onclick="clickInsert('ww','王五')">王五</button>
            <button onclick="clickInsert('zzs','赵四')">赵四</button>
          </div>

          <div class="result-cc">
            <h3>最终报文</h3>
            <button onclick="resultButton()">生成最终结果</button>

            <textarea id="result"></textarea>
          </div>
        
      </body>
      
      <script>
        
        let position = ''
        function blurEdit() {
            position = window.getSelection().getRangeAt(0);
            //判断节点是否嵌套文字
            let result = "";
            //获取编辑框对象
            let inputContent = document.getElementById('inputContent');
            let inputChildList = inputContent.childNodes;
            console.log(inputChildList);
            //判断nodeName
            for(let i =0;i<inputChildList.length;i++){
                let inputChild = inputChildList[i];
                let nodeName = inputChild.nodeName.toLowerCase();
                switch(nodeName){
                    case "#text":
                        //拼接字符串
                    
                        break;
                    case "span":
                        //span节点，存在字符与button，需要分别判断出来
                        let buttonItemList = inputChild.childNodes;
                        for(let j=0;j<buttonItemList.length;j++){
                            let inputChildSpan = buttonItemList[j];
                            let nodeNameSpan = inputChildSpan.nodeName.toLowerCase();
                            switch(nodeNameSpan){
                                case "#text":
                                    let textValue = inputChildSpan.textContent;
                                    //节点移动到父节点下面    
                                    var txt =document.createTextNode(textValue);
                                    inputContent.appendChild(txt);
                                    //移除节点
                                    inputChildSpan.remove();
                                    break;
                                case "button":
                                    
                                    break;
                                default: 

                            }

                        }


                        break;
                    default:
                }
            }

        }
        function clickInsert(buttonCode,buttonName) {
            if(position === ''){
                // 如果div没有光标，则在div内容末尾插入
                const div = document.getElementById('inputContent')
                div.focus()
                const range = window.getSelection()
                range.selectAllChildren(div)
                range.collapseToEnd()
                position = window.getSelection().getRangeAt(0)
            }
            // 创建一个元素
            const span = document.createElement('span')
            // 插入的按钮不可编辑，设置contenteditable为false
            span.innerHTML = '<button contenteditable="false" class="btn" id="'+buttonCode+'">'+buttonName+'</button>'
            // 将按钮插入
            position.insertNode(span);
            //判断是否需要移动节点
            let parentItem = span.parentNode;
            
            console.log("parentItem",parentItem)
            if(parentItem.id != "inputContent"){
                span.remove();
                //需要移动节点
                //在该父节点同级下面添加新的节点
                // 创建一个元素
                const span1 = document.createElement('span')
                // 插入的按钮不可编辑，设置contenteditable为false
                span1.innerHTML = '<button contenteditable="false" class="btn" id="'+buttonCode+'">'+buttonName+'</button>'
                const div = document.getElementById('inputContent');
                div.appendChild(span1);
                
            }
            
        }

        //获取最终报文
        function resultButton(){
            let result = "";
            //获取编辑框对象
            let inputContent = document.getElementById('inputContent');
            let inputChildList = inputContent.childNodes;
            console.log(inputChildList);
            //判断nodeName
            for(let i =0;i<inputChildList.length;i++){
                let inputChild = inputChildList[i];
                let nodeName = inputChild.nodeName.toLowerCase();
                switch(nodeName){
                    case "#text":
                        //拼接字符串
                        result += inputChild.textContent
                        break;
                    case "span":
                        //span节点，存在字符与button，需要分别判断出来
                        let buttonItemList = inputChild.childNodes;
                        result += spanItemParse(buttonItemList);
                        break;
                    default:
                }
            }
            //最终字符串
            let resultTextarea = document.getElementById("result");
            resultTextarea.value = result;
            
        }
        /**
         * 解析span子节点button
         * */
        function spanItemParse(buttonItemList){
            let result = "";
            //解析button节点                 
            for(let j=0;j<buttonItemList.length;j++){
                let inputChildSpan = buttonItemList[j];
                let nodeNameSpan = inputChildSpan.nodeName.toLowerCase();
                switch(nodeNameSpan){
                    case "#text":
                        result += inputChildSpan.textContent
                        break;
                    case "button":
                        result += "#"+inputChildSpan.id+"#";
                        break;
                    default: 

                }

            }
                return result;
            }

      </script>
      
</body>
</html>